<template>
    <div id="changePassword" class="left">
              <div class="header">
              	  <h2>修改密码</h2>
              </div>
              <div class="content">
                <div class="form-horizontal">
                  <div class="row form-group">
                    <label class="control-label col-xs-2" for="oldPassword">原密码:</label>
                    <div class="col-xs-6">
                      <input class="form-control" @change="checkpassword" name="oldPassword" id="oldPassword" v-model.trim="oldPassword" type="password">
                    </div>
                    <div class="col-xs-4 control-label" style="text-align:left"><span :class="{success:activeOldPwd,error:!activeOldPwd}">{{msgoldPassword}}</span></div>
                  </div>
                  <div class="row form-group">
                    <label class="control-label col-xs-2" for="newPassword">新密码:</label>
                    <div class="col-xs-6">
                      <input class="form-control" @blur="checknewpwd" name="oldPassword" id="newPassword" v-model.trim="newPassword" type="password" onkeyup="this.value=this.value.replace(/\s+/g,'')" maxlength="16">
                    </div>
                    <div class="col-xs-4 control-label" style="text-align:left"><span :class="{success:activePwd,error:!activePwd}">{{msgnewPassword}}</span></div>
                  </div>
                  <div class="row form-group">
                    <label class="control-label col-xs-2" for="verifyPassword">重复密码:</label>
                    <div class="col-xs-6">
                      <input class="form-control" @blur="checkifypwd" name="verifyPassword" id="verifyPassword" v-model.trim="verifyPassword" type="password" onkeyup="this.value=this.value.replace(/\s+/g,'')" maxlength="16">
                    </div>
                    <div class="col-xs-4 control-label" style="text-align:left"><span :class="{success:activeNewPwd,error:!activeNewPwd}"> {{msgverifyPassword}}</span></div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-2 col-xs-3">
                      <button class="btn btn-success  btn-block" @click="submit">确认</button>
                    </div>
                    <div class="col-xs-3">
                      <button class="btn btn-default btn-block " @click="clear">取消</button>
                    </div>
                  </div>
                </div>   	
              </div>
    </div>
</template>
<script>
  import { apiModifyPwd, apiIsUserPwd} from '@/api/api'
export default {
    name:'changepassword',
    data:function(){
    	return{
    		msgoldPassword:'',
    		msgnewPassword:'',
    		msgverifyPassword:'',
    		oldPassword:'',
    		newPassword:'',
        verifyPassword: '',
        activeOldPwd: false,
        activePwd: false,
        activeNewPwd: false,
        password:'',
    	}
    },
    mounted() {

    },
    methods : {
      checkpassword: function () {
          this.getIsUserPwd();
            //var pwdReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;//
          var value = $('#oldPassword').val();
          if(this.oldPassword==""){
            this.msgoldPassword = "密码不能为空";
            this.activeOldPwd = false;
          }else if(value.length < 3){
            this.msgoldPassword = "密码不能小于3位";
            this.activeOldPwd = false;
          }else{
            this.msgoldPassword = "正在确认中，请稍后……";
            this.activeOldPwd = true;
          }
            },
            checknewpwd:function(){
            	//var pwdReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;//
            	  var value = $('#newPassword').val();
                if(this.newPassword==""){
                  this.msgnewPassword = "密码不能为空";
                  this.activePwd = false;
                }else if(this.newPassword ==this.oldPassword){
                  this.msgnewPassword = "输入密码不能跟原密码相同";
                  this.activePwd = false;
                }else if(value.length < 3 ){
                  this.msgnewPassword = "密码不能小于3位";
                  this.activePwd = false;
                }
                else{
                  this.msgnewPassword = "输入新密码合法";
                  this.activePwd = true;
                }
            },
            checkifypwd:function(){
            	 
                if(this.verifyPassword==""){
                  this.msgverifyPassword = "密码不能为空";
                  this.activeNewPwd = false;
                }else if(this.verifyPassword !=this.newPassword){
                  this.msgverifyPassword = "输入密码须保持一致";
                  this.activeNewPwd = false;
                }else{
                  this.msgverifyPassword = "再次输入密码正确";
                  this.activeNewPwd = true;
                }
      },
      submit: function () {
        if (this.activeNewPwd && this.activePwd && this.activeOldPwd) {
          this.getModifyPwd();
        } else {
          this.$toast.center('请输入正确的密码或者合法的密码');
        }
       
        
      },
      getModifyPwd() {
        apiModifyPwd({
          userId:  JSON.parse(sessionStorage.getItem('user')).ID  ,
          newPwd: this.newPassword,
          confirmPwd: this.verifyPassword
        })
          .then(res => {
            if (res.Status == 1) {
              this.$toast.center(res.Message);
              this.$router.push({
                path:'/login'
              })
            } else if (res.Status == -1) {
              this.$toast.center(res.Message);
            }
          })
      },
      getIsUserPwd() {
        apiIsUserPwd({
          userId: JSON.parse(sessionStorage.getItem('user')).ID,
          oldPwd: this.oldPassword
        })
          .then(res => {
            if (res.Status == 1) {
              this.activeOldPwd = true;
              this.msgoldPassword = res.Message;

            } else if (res.Status == -1) {
              this.activeOldPwd = false;
              this.msgoldPassword = res.Message;
              this.$toast.center(res.Message);
            }
          })
        
      },
      clear() {
        this.oldPassword = '';
        this.newPassword = '';
        this.verifyPassword = '';
        this.msgverifyPassword = '';
        this.msgnewPassword = '';
        this.msgoldPassword = '';
      }

    }
}
</script>
<style scoped>
#changePassword{
  width:70%;
  width:-moz-calc(100% - 254px);
  width:-webkit-calc(100% - 254px);
  width: calc(100% - 254px);
  height:100vh;
}
.header{
	position: relative;
  width:100%;
  height:124px;
  background-color:#fff;
  border-bottom:2px solid #ccc;
}
.header h2{
	position: absolute;
    top:50%;
    transform:translateY(-70%);
    left:11%;
	  font-weight:500;
	  line-height:30px;
     height:30px;
     letter-spacing: 3px;
}
.content{
	padding:30px 90px;
}
.form-group{
  margin-bottom:25px;
}
.btn{
	padding:9px 12px;
 }
 .form-horizontal .control-label{
 	color:#666;
 	font-size:14px;
 	font-weight:500;
 }
  .success {
    color: green;
  }
  .error {
    color:red;
  }
  @media screen and (max-width :1260px) {
    #changePassword{

  width:70%;
  width:-moz-calc(100% - 2rem);
  width:-webkit-calc(100% - 2rem);
  width: calc(100% - 2rem);
  height:100vh;
  }
  @media screen and (max-width: 768px) {
    .content{
	padding:30px 20px;
}
}
@media screen and (max-width: 425px) {
}
}
</style>
